<!--
 * @LastEditTime : 2022-11-01 10:23:18
 * @FilePath     : /pyy/src/views/instandhaltung/home/index.vue
 * @Description  : 设备维修 > 列表
-->

<template>
  <div id="instandhaltung">
    <van-nav-bar
      title="设备维修列表"
      left-arrow
      @click-left="$router.push('/')"
    >
      <template #right>
        <van-button
          type="default"
          size="small"
          @click="$router.push('/instandhaltung/add')"
        >
          申请设备维修
        </van-button>
      </template>
    </van-nav-bar>

    <div class="search">
      <van-search
        show-action
        shape="round"
        left-icon="null"
        placeholder="请输入搜索内容"
        v-model="queryParams.query"
        @search="handleSearch"
      >
        <template #action>
          <svg-icon name="search" @click="handleSearch" />
        </template>
      </van-search>
    </div>

    <div class="list-wrap">
      <van-list
        v-model="loading"
        :finished="finished"
        :finished-text="finishedText"
        :offset="100"
        @load="onLoad"
      >
        <div
          class="list-item"
          v-for="(item, index) in list"
          :key="'list-item_' + index"
          @click="goToDetail(item.id)"
        >
          <p class="title">设备名称：{{ item.deviceName }}</p>
          <p>委托人：{{ item.consignor }}</p>
          <p>维修地点：{{ item.repairSite }}</p>
        </div>
      </van-list>
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
import api from "@/http/api";

export default {
  name: "Instandhaltung",
  data() {
    return {
      queryParams: {
        // 分页
        page: 1,
        size: 5,
        // 模糊查询数据
        query: "",
      },
      loading: false,
      total: 0,
      list: [
        //{
        //  id: null,
        //  deviceName: null,
        //  consignor: null,
        //  repairSite: null,
        //},
      ],
    };
  },
  computed: {
    // 是否已加载完成
    finished() {
      return this.list.length == this.total;
    },
    // 加载完成后的提示文案
    finishedText() {
      return this.list.length ? "没有更多了" : "暂无数据";
    },
  },
  beforeMount() {
    this.getList();
  },
  methods: {
    /**
     * 点击 搜素 图标
     */
    handleSearch() {
      this.queryParams.page = 1;
      api.instandhaltung
        .getList(this.queryParams)
        .then((res) => {
          Toast.clear();
          const { code, data, msg } = res.data || {};
          if (code == 200) {
            this.list = [ ...data.rows ];
          this.total = data.total;
          } else {
              this.list = [];
              this.total= 0
          }
        })
       
    },

    /**
     * 加载数据
     * @desc: 滚动条与底部距离小于 offset 时触发
     */
    onLoad() {
      this.queryParams.page++;
      this.getList();
    },

    /**
     * 获取列表信息
     */
    getList() {
      this.loading = true;
      const toast = Toast.loading({
        duration: 0,
        forbidClick: true,
      });

      api.instandhaltung
        .getList(this.queryParams)
        .then((res) => {
          const { code, data, msg } = res.data || {};
          if (code !== 200) {
            this.list = [];
            Toast.fail(msg || "加载失败");
            return;
          }
          this.list = [...this.list, ...(data.rows || [])];
          this.total = data.total;
        })
        .finally(() => {
          setTimeout(toast.clear, 500);
          this.loading = false;
        });
    },

    /**
     * 去往详情
     * @param {string} id: 化学分析数据列表项id
     */
    goToDetail(id) {
      this.$router.push({
        name: "InstandhaltungDetail",
        query: { id },
      });
    },
  },
};
</script>

<style lang="less" scoped>
#instandhaltung {
  width: 100vw;
  height: 100vh;
  background-color: #f5f5f5;
  display: flex;
  flex-direction: column;

  /deep/ .van-nav-bar {
    .van-nav-bar__title {
      font-family: "Inter";
      font-style: normal;
      font-weight: 600;
      font-size: 18px;
      line-height: 20px;
      text-align: center;
      letter-spacing: -0.24px;
      color: #333333;
    }

    .van-nav-bar__content {
      .van-nav-bar__left {
        i {
          font-size: 20px;
          color: #999999;
        }
      }

      .van-nav-bar__right {
        .van-button {
          background: rgba(14, 134, 209, 0.2);
          border: 1px solid #0e86d1;
          border-radius: 5px;
          font-family: "ABeeZee";
          font-style: normal;
          font-weight: 400;
          font-size: 14px;
          line-height: 20px;
          text-align: center;
          letter-spacing: -0.24px;
          color: #0e86d1;
          padding: 3px 5px;
          height: max-content;
        }
      }
    }
  }

  .search {
    margin: 8px 10px;
    height: 33px;

    /deep/ .van-search {
      padding: 0;
      border-radius: 50px;

      .van-search__content {
        background: #ffffff;
        padding-left: 12px;
      }

      .van-search__action {
        width: max-content;
        padding: 0;
        line-height: normal;
        height: max-content;
        margin-right: 16px;
        background: none;

        .svg-icon {
          height: 22px;
          width: 22px;
          margin: 0;
        }
      }
    }
  }

  .list-wrap {
    width: 100%;
    height: 0;
    flex: 1;
    overflow-y: auto;

    .list-item {
      margin: 0px 10px 8px;
      background: #ffffff;
      border-radius: 8px;
      padding: 18px;
      overflow: hidden;
      position: relative;

      p {
        font-family: "Inter";
        font-style: normal;
        font-weight: 400;
        font-size: 14px;
        line-height: 26px;
        color: #666666;
        margin: 0;

        &.title {
          font-family: "Inter";
          font-style: normal;
          font-weight: 600;
          font-size: 16px;
          line-height: normal;
          color: #393939;
          margin-bottom: 10px;
        }

        &.money {
          span {
            color: #2dbc33;
            font-weight: bold;
            font-size: 18px;
          }
        }
      }
    }
  }
}
</style>
